<template>
  <div class="game-wrapper">
    <div class="history-wrapper">
      <h2>历史接龙单词</h2>
      <ul>
        <li v-for="(word, index) in wordList" :key="index">{{ word }}</li>
      </ul>
    </div>
    <div class="word-chain-wrapper">
      <h1>单词接龙</h1>
      <div>
        <p>上一个单词：{{ lastWord }}</p>
        <div class="input-wrapper">
          <input v-model="currentWord" type="text" :disabled="timeLeft === 0" @keyup.enter="checkWord" />
          <button :disabled="timeLeft !== 0" @click="startGame">开始游戏</button>
        </div>
        <div v-if="timeLeft > 0" class="countdown">剩余时间：{{ timeLeft }}s</div>
        <div class="translation-wrapper">
          <p>{{ currentTranslation }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import axios from 'axios';

export default defineComponent({
  name: 'WordChain',
  setup() {
    const lastWord = ref('');
    const currentWord = ref('');
    const wordList = ref([]);
    const timeLeft = ref(0);
    const timer = ref(null);
    const currentTranslation = ref('');

    const startGame = () => {
      if (wordList.value.length === 0) {
        timeLeft.value = 30;
        timer.value = setInterval(() => {
          timeLeft.value--;
          if (timeLeft.value === 0) {
            clearInterval(timer.value);
            alert('时间到');
          }
        }, 1000);
      } else {
        clearInterval(timer.value);
        timeLeft.value = 30;
        timer.value = setInterval(() => {
          timeLeft.value--;
          if (timeLeft.value === 0) {
            clearInterval(timer.value);
            alert('时间到');
          }
        }, 1000);
      }
    };

    const checkWord = () => {
      if (currentWord.value.length === 0) {
        return;
      }
      if (wordList.value.includes(currentWord.value)) {
        alert('单词已经使用过了');
        return;
      }
      if (lastWord.value.length > 0 && currentWord.value[0] !== lastWord.value[lastWord.value.length - 1]) {
        alert('单词首字母不匹配');
        return;
      }
      axios
        .get(`https://api.dictionaryapi.dev/api/v2/entries/en/${currentWord.value}`)
        .then(response => {
          const data = response.data[0];
          const meanings = data.meanings;
          let translation = '';
          for (let i = 0; i < meanings.length; i++) {
            const meaning = meanings[i];
            const definitions = meaning.definitions;
            for (let j = 0; j < definitions.length; j++) {
              const definition = definitions[j];
              translation += `${definition.definition}。例句：${definition.example}；`;
            }
          }
          currentTranslation.value = translation;
          lastWord.value = currentWord.value;
          wordList.value.push(currentWord.value);
          currentWord.value = '';
          startGame();
        })
        .catch(error => {
          console.log(error);
          alert('单词不存在');
        });
    };

    watch(timeLeft, newValue => {
      if (newValue === 0) {
        alert('时间到');
      }
    });

    return {
      lastWord,
      currentWord,
      wordList,
      timeLeft,
      startGame,
      checkWord,
      currentTranslation
    };
  }
});
</script>

<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
}

h1,
h2 {
  margin-top: 0;
}

input[type='text'] {
  font-size: 1.2rem;
  padding: 0.5rem;
  margin-right: 1rem;
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.1);
  width: 20rem;
}

button {
  font-size: 1.2rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.5rem;
  background-color: #4caf50;
  color: white;
  cursor: pointer;
  box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.1);
}

button:disabled {
  background-color: grey;
  cursor: default;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  margin-bottom: 0.5rem;
}

.game-wrapper {
  display: flex;
  align-items: flex-start;
  padding: 2rem;
}

.history-wrapper {
  margin-right: 2rem;
}

.word-chain-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.input-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
}

.translation-wrapper {
  margin-top: 2rem;
  text-align: center;
}

.countdown {
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: center;
}
</style>
